<template>
  <div class="lb">
      <div>猜你喜欢</div>
      <div class="up">
        <div>综合排序</div>
        <div @click="yuanjin" class="juli">距离最近</div>
        <div @click="liang" class="xiaoliang">销量最高</div>
      </div>
      <div class="down" v-for="(item,index) in shujuu" :key="index">
        <div class="tu">
          <img :src="item.picUrl" alt="">
        </div>
        <div class="text">
          <div>{{item.name}}</div>
          <section>{{item.monthSalesTip}}</section>
          <section>距离{{item.distance}}</section>
        </div>
      </div>
  </div>
</template>

<script>
import { a } from '@/api'

export default {
    data(){
      return{
        xiabiao:0,
        shujuu:[]
      }
    },
    mounted(){
        a().then((res)=>{
          console.log(res.data.list);
          this.shujuu=res.data.list
        })
    },
    methods:{
      yuanjin(){
        this.shujuu.sort(function(a,b){
          // console.log(parseInt(a.distance));
        return (parseInt(a.distance)-parseInt(b.distance))
      })
      },
      liang(){
        this.shujuu.sort(function(a,b){
          console.log(parseInt(a.monthSalesTip.substring(2,a.monthSalesTip.length)));
        return (parseInt(a.monthSalesTip.substring(2,a.monthSalesTip.length))-parseInt(b.monthSalesTip.substring(2,b.monthSalesTip.length)))
      })
      },
    }
}
</script>

<style scoped>
  .lb{
    background-color: cornflowerblue;
  }
  .lb .up{
    display: flex;
    justify-content: space-around;
  }
  .lb .down{
    display: flex;
    margin-top: 10px;
  }
  .lb .down .tu{
    width: 120px;
    background-color: aqua;
  }
  .lb .down .tu img{
    width: 100%;
  }
  .lb .down .text{
    margin-left: 20px;
  }
  .lb .down .text section{
    margin-top: 10px;
  }
</style>